<template>

  <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <el-form :model="student" :rules="rules" ref="studForm">
      <el-form-item label="学生姓名" :label-width="formLabelWidth" prop="sname">
        <el-input v-model="student.sname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学生性别" :label-width="formLabelWidth"  prop="sex">
        <el-radio-group v-model="student.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="学生年龄" :label-width="formLabelWidth"  prop="age">
        <el-input v-model="student.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学生住址" :label-width="formLabelWidth"  prop="addr">
        <el-input v-model="student.addr" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所在班级" :label-width="formLabelWidth"  prop="cid">
        <el-select v-model="student.cid" placeholder="所在班级" style="width:100%">
          <el-option :label="c.cname" :value="c.cid" v-for="c in classes" :key="c.cid"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import  {findClasses} from '@/api/classes'
  import {add,update} from '@/api/student'
    export default {
        name: "add_or_update",
        data(){
          // 自定义年龄的验证规则
          let checkAge = (rule, value, callback)=>{
            if (!value) {
              return callback(new Error('年龄不能空'));
            }else if(isNaN(value)){
              return callback(new Error('年龄为整数'));
            }else if(value < 0 || value > 100){
              return callback(new Error("年龄范围在0-100之间"))
            }else{
              callback();
            }
          };
          return {
            title:'添加学生',           // 标题
            dialogFormVisible:false,   // 对话框是否可见
            student:{},                // 学生对象
            formLabelWidth:'120px',     // 表单标签的文本宽度
            classes:[],                // 所有班级列表
            //下面定义验证规则
            rules:{
              sname:[
                {required: true, message: '请输入用户名', trigger: 'blur'}
              ],
              sex:[
                 {required: true, message: '请选择性别', trigger: 'blur'}
              ],
              age:[
                { validator: checkAge, trigger: 'blur' }
              ],
              addr:[
                {required: true, message: '请输入住址', trigger: 'blur'}
              ],
              cid:[
                {required: true, message: '请选择班级编号', trigger: 'change'}
              ]
            }

          }
        },
        created() {
          // 查询班级
          this.findClasses()
        },
        methods:{
          // 查询班级
          async findClasses(){
            let {data} = await findClasses();
            this.classes = data.list
          },
          // 对组件进行初始化
          init(row){    // row：有值就是修改，没有就为数据添加
            // 根据row是否有值来决定添加或修改
            if(row){
              // 标题进行修改（弹窗）
              this.title = "修改学生"
              // student赋值
              this.student = row
            }else{  // 添加
              // 修改标题
              this.title = "添加学生"
              // 表单全部清除
              this.student = {}
            }
            // 对话框
            this.dialogFormVisible = true
          },
          // 表单进行提交(添加或修改)
          submitForm() {
            this.$refs['studForm'].validate((valid) => {
              // 执行修改/添加
              if (valid) {      // 表单组件验证通过
                if(this.student.sid){   // 如果有sid的值就修改,添加是没有四点的
                  let _this = this
                  update(this.student).then((data)=>{
                    if(data.code == 20000){ // 设置状态码
                      _this.$message({
                        message: data.message,
                        type: 'success',
                        onClose(){    // 关闭对话框的同时对页面进行刷新
                          _this.$emit("flushData");
                        }
                      });
                    }
                  })
                }else{                  // 否则，就是添加（没有sid）
                  let _this = this
                  add(this.student).then(data=>{
                    console.log(data)
                    if(data.code == 20000){ // 设置状态码

                      this.$message({
                        message: data.message,
                        type: 'success',
                        onClose(){    // 关闭对话框的同时对页面进行刷新
                          _this.$emit("flushData");
                        }
                      });
                    }
                  })
                }
              }
              // 关闭对话框（结束）
              this.dialogFormVisible = false
            });
          },
          resetForm() {
            this.$refs['studForm'].resetFields();
          }
        },

    }
</script>

<style scoped>

</style>
